import { defineComponent, ref, PropType } from 'vue'
import type { Node } from '@vue-flow/core'

export default defineComponent({
  name: 'StartNodeConfigModal',
  props: {
    node: {
      type: Object as PropType<Node>,
      required: true,
    },
    onClose: {
      type: Function as PropType<() => void>,
      required: true,
    },
    onSave: {
      type: Function as PropType<(config: any) => void>,
      required: true,
    },
  },
  setup(props) {
    const params = ref(
      props.node.data.config.params || [
        { name: '', type: 'string', default: '', description: '' },
      ]
    )

    const addParam = () => {
      params.value.push({
        name: '',
        type: 'string',
        default: '',
        description: '',
      })
    }

    const removeParam = (index: number) => {
      params.value.splice(index, 1)
    }

    const handleSave = () => {
      // 过滤掉空的参数
      const validParams = params.value.filter(p => p.name.trim() !== '')
      props.onSave({ params: validParams })
    }

    return () => (
      <div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
        <div class="bg-[#2D1A45] rounded-lg p-6 w-[800px] border border-[#3D2A55]">
          <h2 class="text-xl font-bold mb-4 text-white">配置输入参数</h2>

          <div class="space-y-4 max-h-[500px] overflow-y-auto">
            {params.value.map((param, index) => (
              <div key={index} class="grid grid-cols-12 gap-2 items-start">
                <input
                  v-model={param.name}
                  placeholder="参数名"
                  class="col-span-2 bg-[#1A1A1A] border border-[#3D2A55] rounded px-3 py-2 text-white"
                />
                <select
                  v-model={param.type}
                  class="col-span-2 bg-[#1A1A1A] border border-[#3D2A55] rounded px-3 py-2 text-white"
                >
                  <option value="string">字符串</option>
                  <option value="number">数字</option>
                  <option value="boolean">布尔值</option>
                </select>
                <input
                  v-model={param.default}
                  placeholder="默认值"
                  class="col-span-2 bg-[#1A1A1A] border border-[#3D2A55] rounded px-3 py-2 text-white"
                />
                <input
                  v-model={param.description}
                  placeholder="描述"
                  class="col-span-5 bg-[#1A1A1A] border border-[#3D2A55] rounded px-3 py-2 text-white"
                />
                <button
                  onClick={() => removeParam(index)}
                  class="col-span-1 px-3 py-2 bg-red-600 text-white rounded hover:bg-red-700"
                >
                  删除
                </button>
              </div>
            ))}
          </div>

          <div class="flex justify-between mt-4">
            <button
              onClick={addParam}
              class="px-4 py-2 bg-[#4D3A65] text-white rounded hover:bg-[#5D4A75]"
            >
              添加参数
            </button>
            <div class="space-x-2">
              <button
                onClick={props.onClose}
                class="px-4 py-2 bg-[#3D2A55] text-white rounded hover:bg-[#4D3A65]"
              >
                取消
              </button>
              <button
                onClick={handleSave}
                class="px-4 py-2 bg-[#6D5A85] text-white rounded hover:bg-[#7D6A95]"
              >
                保存
              </button>
            </div>
          </div>
        </div>
      </div>
    )
  },
})
